<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:jr="http://jasperreportjsf.sf.net/tld/jasperreports-jsf-1_2.tld"
    template="/plantillas/plantilla-sistema.xhtml">
    
    <ui:define name="cabecera">
        <title>Contacto</title>
        <link rel="shortcut icon"  
              href="../../resources/imagenes/favicon.ico" />
    </ui:define>
    
    <ui:define name="contenido">

        <center>
        <p:panel id="contactoPnl" header="Contacto" 
                 styleClass="contenido">
            <h:form id="enviarCorreoFrm">
                
                <h:outputText value="Una notificación por correo será enviada al 
                                     equipo de soporte del sistema para contestar
                                     su petición, la respuesta será enviada al 
                                     correo proveído." 
                              style="margin-top:20px; margin-bottom:20px; font-size: 85%" />
                
                <p:separator />
                
                <h:panelGrid columns="2" 
                             style="margin-top:20px">

                    <h:outputLabel 
                        for="remitenteTxt" 
                        value="Nombre:" 
                        style="font-size: 85%"/>
                    <p:inputText id="remitenteTxt" 
                                 value="#{correoBean.remitente}" 
                                 title="Nombre de usuario"
                                 size="45"
                                 required="true"
                                 requiredMessage="Campo obligatorio"/>
                    
                    <h:outputLabel for="correoTxt" value="Correo:" 
                                   style="font-size: 85%"/>
                    <p:inputText id="correoTxt" 
                                 value="#{correoBean.correo}" 
                                 title="Correo de usuario"
                                 size="45"
                                 required="true"
                                 requiredMessage="Campo obligatorio"/>
                    
                    <h:outputLabel for="asuntoTxt" value="Asunto:" 
                                   style="font-size: 85%"/>
                    <p:inputText id="asuntoTxt" 
                                 value="#{correoBean.asunto}" 
                                 title="Asunto del mensaje"
                                 size="60"
                                 required="true"
                                 requiredMessage="Campo obligatorio"/>
                    
                    <h:outputLabel for="mensajeTxt" 
                                   value="Mensaje:" 
                                   style="font-size: 85%"/>
                    <p:inputTextarea id="mensajeTxt" 
                                     value="#{correoBean.contenido}" 
                                     title="Contenido del mensaje"
                                     rows="10"
                                     cols="80" 
                                     required="true"
                                     requiredMessage="Campo obligatorio"/>

                </h:panelGrid>
                
                <p:commandButton value="Enviar"
                                 actionListener="#{correoBean.enviarCorreo(
                                                   correoBean.correoSoporte)}"
                                 update="@form"
                                 oncomplete="if ( !args.validationFailed ) enviarCorreoWgt.hide();" 
                                 style="float:right; font-size: 80%"/>
                <br/>
                <br/>
            </h:form>
            </p:panel>
        </center>
        
    </ui:define>
    
</ui:composition>